<!--房产详细信息页-->
<template>
    <div>
        <div class="page-banner-section section">
            <div class="container">
                <div class="row">
                    <div class="col">
                        <h1 class="page-banner-title">房产</h1>
                        <ul class="page-breadcrumb">
                            <li><a href="/">主页</a></li>
                            <li class="active">房产详细信息</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="property-section section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-100 pb-lg-80 pb-md-70 pb-sm-60 pb-xs-50">
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 col-12 order-1 order-lg-2 mb-sm-50 mb-xs-50">
                        <div class="row">
                            <div class="single-property col-12 mb-50">
                                <div class="property-inner">
                                    <div class="head">
                                        <div class="left">
                                            <h1 class="title">{{houseDetail.title}}</h1>
                                            <span class="location"><img src="/images/icons/marker.png" alt="">{{houseDetail.address}}</span>
                                        </div>
                                        <div class="right">
                                            <div class="type-wrap">
                                                <span class="price">￥{{houseDetail.price}}<span
                                                        v-if="houseDetail.rentType===1">{{leaseTypeVal[houseDetail.leaseType]}}</span></span>
                                                <span class="type" v-show="houseDetail.rentType===2">出售</span>
                                                <span class="type" v-show="houseDetail.rentType===1">出租</span>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="image mb-30">
                                        <img :src="houseDetail.pictureUrl" alt="">
                                    </div>
                                    <div class="content">
                                        <h3>描述</h3>
                                        <p>{{houseDetail.discription}}</p>
                                        <div class="row mt-30 mb-30">
                                            <div class="col-md-5 col-12 mb-xs-30">
                                                <h3>基础属性</h3>
                                                <ul class="feature-list">
                                                    <li>
                                                        <div class="image"><img src="/images/icons/area.png" alt="">
                                                        </div>
                                                        {{houseDetail.square}} 平方米
                                                    </li>
                                                    <li>
                                                        <div class="image"><img src="/images/icons/bed.png" alt="">
                                                        </div>
                                                        房间 {{houseDetail.roomNumber}}
                                                    </li>
                                                    <li>
                                                        <div class="image"><img src="/images/icons/bath.png" alt="">
                                                        </div>
                                                        浴室 {{houseDetail.bathroomNumber}}
                                                    </li>
                                                    <li>
                                                        <div class="image"><img src="/images/icons/parking.png" alt="">
                                                        </div>
                                                        车位 {{houseDetail.garageNumber}}
                                                    </li>
                                                    <li>
                                                        <div class="image"><img src="/images/icons/kitchen.png" alt="">
                                                        </div>
                                                        厨房 {{houseDetail.kitchenNumber}}
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-md-7 col-12">
                                                <h3>便利设施</h3>
                                                <ul class="amenities-list">
                                                    <li>Air Conditioning</li>
                                                    <li>Bedding</li>
                                                    <li>Balcony</li>
                                                    <li>Cable TV</li>
                                                    <li>Internet</li>
                                                    <li>Parking</li>
                                                    <li>Lift</li>
                                                    <li>Pool</li>
                                                    <li>Dishwasher</li>
                                                    <li>Toaster</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-12 mb-30" v-if="houseDetail.videoUrl">
                                                <h3>视频</h3>
                                                <div class="embed-responsive embed-responsive-16by9">
                                                    <iframe class="embed-responsive-item"
                                                            :src="houseDetail.videoUrl"></iframe>
                                                </div>
                                            </div>
                                            <div class="col-12">
                                                <h3>地理位置</h3>
                                                <div class="embed-responsive embed-responsive-16by9">
                                                    <div id="single-property-map"
                                                         class="embed-responsive-item google-map" data-lat="40.740178"
                                                         data-Long="-74.190194"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--搜索组件栏-->
                    <div class="col-lg-4 col-12 order-2 order-lg-1 pr-30 pr-sm-15 pr-xs-15">
                        <div class="sidebar">
                            <h4 class="sidebar-title"><span class="text">搜索房产</span><span class="shape"></span></h4>
                            <fc-search @searchResult="searchResult" :searchParams="searchParams"/>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import FcSearch from '@/components/property/SearchPropertySmall.vue'

    export default {
        data() {
            return {
                searchParams: {
                    url: '/test',
                    data: {
                        pageIndex: 0,
                        pageSize: 2,
                    }
                },
                leaseTypeVal: ['', '天', '周', '月', '季', '年'],
                houseDetail: {
                    id: 1,
                    pictureUrl: '/images/property/property-1.jpg',
                    square: 550,
                    roomNumber: 3,
                    bathroomNumber: 3,
                    garageNumber: 3,
                    title: '江南宅院',
                    price: 550,
                    leaseType: 1,
                    address: '锦江区东大街下东大街568号',
                    rentType: 1,
                    hot: 0,
                    special: 0,

                    kitchenNumber: 1,
                    videoUrl: '',
                    discription: '室内精装修，拎包入住，客厅宽敞大方，卧室温馨舒适，厨房设施齐全，家具家电齐全，拥有舒心的居住环境',

                }
            }
        },
        components: {
            FcSearch
        },
        methods: {
            searchResult(data) {
                console.log(data);
            }
        }
    }
</script>

<style scoped>

</style>
